<template>
  <div class="mod-home">
    <mavon-editor
      v-model="value"
      :ishljs="true"
      :toolbarsFlag="false"
      :htmlcode="false"
      :subfield="false"
      :editable="false"
      defaultOpen ="preview"/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: '## Raiseinfo Frontend Framework \n' +
          '\n' +
          '### 安装及运行\n' +
          '```\n' +
          '1. cnpm install\n' +
          '2. npm run dev\n' +
          '```\n' +
          '### 开启Mock模拟数据\n' +
          '```\n' +
          '1. 全局开启Mock：\n' +
          '  通过设置/src/mock/example.js)文件中fnCreate(common, [false])[]中括号中为true／false开启关闭当前模块mock本地模拟数据功能。\n' +
          '2. 模块级局部开启：\n' +
          '  通过设置/src/mock/modules/文件下模块isOpen: [false][]中括号中为true／false开启关闭当前api接口mock本地模拟数据功能。（默认开启）\n' +
          '```\n' +
          '### 定制主题\n' +
          '```\n' +
          '1. 修改Element-ui组件主题：\n' +
          '  修改/src/element-ui-theme/index.js文件中import \'./element-[#17b3a3]/index.css\'[]中括号中的值，值可以在同文件中list属性中取即可。\n' +
          '2. 修改站点主题：\n' +
          '  修改/src/assets/scss/_variables.scss文件中$--color-primary: [#17b3a3];[]中括号中的值，值与第一步值同步即可。\n' +
          '```\n' +
          '### 动态路由\n' +
          '```\n' +
          '菜单路由项：值为/sys/user自动映射对应文件目录为src/views/modules/[sys/user.vue]文件\n' +
          '```\n' +
          '### 样式调整记录\n' +
          '```\n' +
          '1. 自定义样式：src\\assets\\scss\\_custom.scss\n' +
          '2. 应用样式：src\\assets\\scss\\index.scss 添加 @import "custom";\n' +
          '3. Element-ui组件默认为mini：src\\element-ui\\example.js \n' +
          '  Vue.prototype.$ELEMENT = { size: \'mini\' }\n' +
          '```\n' +
          '### 创建功能模块\n' +
          '#### 添加菜单目录和菜单项\n' +
          '```\n' +
          '实际项目中可以在对接系统管理模块后，通过菜单添加，然后根据命名约定创建模块目录。\n' +
          'Mock模拟数据：\n' +
          '1. 创建文件：src\\mock\\modules\\example-grid.js\n' +
          '2. 编辑文件：添加模拟数据，并提供接口\n' +
          '3. 开启Mock拦截：src\\mock\\example.js 添加：\n' +
          '  import * as exampleGrid from \'./modules/example-grid\'\n' +
          '  fnCreate(exampleGrid, true)\n' +
          '4. 添加菜单项：src\\mock\\modules\\sys-menu.js\n' +
          '  添加菜单，添加权限\n' +
          '```\n' +
          '#### 添加功能模块页面\n' +
          '```\n' +
          '1. 在目录src\\views\\modules中创建与菜单URL对应的目录结构\n' +
          '  比如：菜单路径为：example/grid，创建的目录结构统一即可\n' +
          '2. 确保src\\views\\modules\\example\\grid.vue此文件存在，并编写测试代码。\n' +
          '3. 通过点击系统中的[参考页面][数据列表]查看是否显示正常\n' +
          '4. 其他编程细节请看具体模块文件\n' +
          '```\n' +
          '### 利用接口开发\n' +
          '```\n' +
          '修改/static/config/index.js目录文件中 window.SITE_CONFIG[\'baseUrl\'] = \'本地api接口请求地址\';\n' +
          '```\n' +
          '### 跨域设置\n' +
          '```\n' +
          '1. 修改/config/dev.env.js目录文件中OPEN_PROXY: true开启代理\n' +
          '2. 修改/config/index.js目录文件中proxyTable对象target: \'代理api接口请求地址\'\n' +
          '3. 重启本地服务\n' +
          '4. 本测试API：https://www.easy-mock.com/mock/5c1dc926eba47d7ec5d137d3/example/grid/list\n' +
          '```\n' +
          '### 业务实现的步骤和原理\n' +
          '1. 建立业务菜单后后，根据命名规则，在src\\views\\modules\\下面创建相应的模块目录和功能文件。（可以参考添加功能模块页面）\n' +
          '2. 接口调用的实现在：src\\service\\core.js\n' +
          '3. 接口调用的URL定义在：src\\service\\example.js\n' +
          '4. 表单验证方法在：src\\utils\\validator.js\n' +
          '5. 表单验证规则定义：src\\utils\\validate.js\n' +
          '6. 与框架无关的工具函数：src\\utils\\util.js',
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikeThrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imageLink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullScreen: true, // 全屏编辑
          readModel: true, // 沉浸式阅读
          htmlCode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignLeft: true, // 左对齐
          alignCenter: true, // 居中
          alignRight: true, // 右对齐
          /* 2.2.1 */
          subField: true, // 单双栏模式
          preview: true // 预览
        }
      }
    }
  }
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }
</style>

